<template>
    <div style="width:100%;height:100%" ref="chartsDOM"></div>
</template>

<script setup>
import { onMounted, ref, defineExpose, defineProps } from 'vue'
import * as echarts from 'echarts';
import { staticData } from '@/js/mapData.js'

const props = defineProps({
    series: {
        type: Array,
        default: () => ([])
    },
    visualMap: {
        type: Object,
    }
});


const chartsDOM = ref();
const myChart = ref();


onMounted(() => {
    // 初始化统计图对象
    myChart.value = echarts.init(chartsDOM.value);
    myChart.value.showLoading();

    // 在得到数据的基础上，进行地图绘制
    myChart.value.hideLoading();
    echarts.registerMap('TJ', staticData);
    const mapBg = require("@/assets/images/map1.jpg")
    const option = {
        visualMap: props.visualMap,
        // 添加 geo 组件，用于定义地理坐标系
        geo: {
            map: 'TJ',
            roam: true, // 启用地图缩放和平移
            zoom: 1.8,
            center: [117.410749, 39.285733], // 设置地图中心点
            // 地图区域样式，移除 normal 层级，直接配置样式属性
            itemStyle: {
                areaColor: {
                    image: mapBg
                },
                borderColor: '#00c2ff',
                borderWidth: 1,
                shadowColor: '#00c2ff',
                shadowBlur: 3,
                emphasis: {
                    areaColor: {
                        image: mapBg,
                    },
                    shadowColor: '#00c2ff',
                    shadowBlur: 20
                }
            },
            // 地图高亮标签样式
            label: {
                normal: {
                    show: true,
                    color: '#00c2ff'
                },
                emphasis: {
                    show: true,
                    color: '#00c2ff'
                }
            },
            // 为地图添加阴影效果
            silent: false,
            shadowBlur: 50,
            shadowColor: '#9cdbf9',
            shadowOffsetX: 30,
            shadowOffsetY: 0
        },
        series: [
            // 添加图片系列
            ...props.series // 原有系列
        ]

    };
    myChart.value.setOption(option);
});
defineExpose({
    myChart
});
</script>

<style lang="scss" scoped></style>